<template>
	<view class="calltransfer">
<!-- 		<view class="top">
			呼叫转移设置
		</view> -->
		<!-- <view class="son">
			<uni-icons type="back" size="25" @click="back"></uni-icons>
		</view> -->
		<view class="buttom">
			<button :class="{'active':active === 1}" type="default" @click="status(1)" style="border-color: #3055C8;" plain="true"
				size="mini">转移介绍</button>
			<button :class="{'active':active === 2}" type="default" @click="status(2)" plain="true" size="mini"
				style="margin-left: 10rpx; border-color: #3055C8;">操作步骤</button>
		</view>
		<view class="content" v-if="active === 1">
			<view class="item">
				<uni-card title="1.呼叫转移的介绍">
					<span class="cont">
						<span  style="margin-left: 50rpx;"></span>
						呼叫转移是一种非常实用的电话功能，它可以帮助用户将来电转移到
						其他电话号码，以便在无法接听电话的情况下不会错过重要的电话。
						在本文中，我们将介绍呼叫转移的工作原理、使用方法以及一些常见
						的问题和解决方法。
					</span>
				</uni-card>
			</view>
			<view class="item">
				<uni-card title="2.呼叫转移的工作原理">
					<span class="cont">
						<span style="margin-left: 50rpx;"></span>
						呼叫转移的工作原理非常简单。当您无法接听电话时，您可以将来
						电转移到其他电话号码，例如您的手机或办公室电话。当有人拨打
						您的电话号码时，电话系统会自动将来电转移到您指定的电话号码。
						这样，您就可以在任何地方接听电话，而不必担心错过任何重要的
						电话。
					</span>
				</uni-card>
			</view>
			<view class="item">
				<uni-card title="3.无应答呼叫转移">
					<span class="cont">
						<span style="margin-left: 50rpx;"></span>
						输入无应答呼叫转移时间。这是指当您无法在规定时间内
						接听电话时，电话系统将自动将来电转移到您指定的电话号码。在
						某些电话系统中，您可以设置无应答呼叫转移时间为5秒、10秒或
						15秒。
					</span>
				</uni-card>
			</view>
			<view class="item">
				<uni-card title="4.无法使用呼叫转移功能">
					<span class="cont">
						<span class="content" style="margin-left: 50rpx;"></span>
						如果您无法使用呼叫转移功能，请检查您的电话系统是否支持呼叫
						转移功能。如果您的电话系统不支持呼叫转移功能，请联系您的电
						话服务提供商以获取更多信息。
					</span>
				</uni-card>
			</view>
			<view class="item">
				<uni-card title="5.呼叫转移无法正常工作">
					<span class="cont">
						<span class="content" style="margin-left: 50rpx;"></span>
						如果您的呼叫转移无法正常工作，请检查您的电话系统设置是否正
						确。如果您的设置正确，但呼叫转移仍然无法正常工作，请联系您
						的电话服务提供商以获取更多信息。
					</span>
				</uni-card>
			</view>
			<view class="item">
				<uni-card title="6.呼叫转移费用过高">
					<span class="cont">
						<span class="content" style="margin-left: 50rpx;"></span>
						呼叫转移可能会产生额外的费用。如果您发现呼叫转移费用过高
						请联系您的电话服务提供商以获取更多信息。
					</span>
				</uni-card>
			</view>
			<view class="item">
				<uni-card title="最后">
					<span class="cont">
						<span class="content" style="margin-left: 50rpx;"></span>
						呼叫转移是一种非常实用的电话功能，它可以帮助您在无法接听电
						话的情况下不会错过重要的电话。如果您想了解更多关于呼叫转移
						的信息，请联系您的电话服务提供商。
					</span>
				</uni-card>
			</view>
		</view>

		<!-- 步骤 -->
		<view class="himg" v-else>
			<view style="font-weight: 700; margin-left: 30rpx;">
				以红米手机k40为例：
			</view>
			<view class="item">
				<uni-card title="步骤一：打开手机电话设置选择来电转接">
					<view class="conimg">
						<image src="../../static/img/Calltransfer001.jpg" mode="" mode="widthFix"></image>
					</view>
				</uni-card>
				<uni-card title="步骤二：选择电话号码">
					<view class="conimg">
						<image src="../../static/img/Calltransfer002.jpg" mode="" mode="widthFix"></image>
					</view>
				</uni-card>
				<uni-card title="步骤三：设置转接时间以及号码">
					<view class="conimg">
						<image src="../../static/img/Calltransfer003.jpg" mode="" mode="widthFix"></image>
					</view>
				</uni-card>
			</view>
		</view>
	</view>
</template>

<script>
import { log } from 'util';
	export default {
		data() {
			return {
				// 选中状态
				active: 1
			};
		},
		methods: {
			// 选中状态
			status(stu) {
				this.active = stu
			}
		}
	}
</script>

<style lang="scss">
	.calltransfer {
		background-color: #F5F5F5;
		width: 750rpx;
		height: 100%;
		position: relative;
		padding-top: 45rpx;

		.son {
			position: absolute;
			top: 15rpx;
		}

		.top {
			height: 80rpx;
			color: black;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 2rpx solid #ccc;
		}

		.buttom {
			margin: 0 30rpx;

			.active {
				color: #3055C8;
				font-weight: 700;
			}
		}

		.item {
			.text {
				font-size: 40rpx;
				font-weight: 700;
				margin: 20rpx 0;
			}

			.cont {
				font-size: 28rpx;
				letter-spacing: 2rpx;
			}
		}
	}
</style>